<template>
  <div class="Footer">
    <div class="footer_box">
      <div class="footer_content">
        <div class="l_1 vas">
          <div class="ll_1">
            <ul>
              <li class="ll_link"> 
                <a >电子礼品卡</a> </li>
                <li class="ll_link"><a >限时抢购</a></li>
              <li class="ll_link"><a >注册MASK会员</a></li>
            </ul>
          </div>
         
        </div>
        <div class="l_1 vas">
          <div class="ll_1">
            <ul>
              <li class="footer_heading"><a href="">获得帮助</a></li>
               <li class="ll_link"><a class="sml">订单状态</a></li>
               <li class="ll_link"><a class="sml">配送方式</a></li>
               <li class="ll_link"><a class="sml">退换货</a></li>
               <li class="ll_link"><a class="sml">联系方式</a></li>
            </ul>
          </div>
        </div>

        <div class="l_1 vas">
          <div class="ll_1">
            <ul>
              <li class="footer_heading"><a href="">关于MASK</a></li>
               <li class="ll_link"><a class="sml">加入我们</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer_note">
        <div class="note_cones">
          <div class="nt1">
            <div class="nttsvg">
              <svg t="1675869562126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3277" width="32" height="32"><path d="M511.984139 860.084767c-120.725572 0-242.555292-32.858362-242.555292-106.223277 0-57.331753 83.419921-92.852758 160.948669-101.577466l4.247744-0.509606L327.468728 479.665571c-3.455705-6.175653-6.713912-12.803607-9.602705-19.488867l-2.833535-5.722328-0.452301-2.2656c-9.404184-24.474414-14.19121-50.080605-14.19121-76.084862 0-116.986411 94.92086-212.190727 211.567533-212.190727s211.567533 95.204315 211.567533 212.190727c0 26.030863-4.787026 51.610448-14.219863 76.084862l-1.444908 3.682879 0.14224 0-1.105171 2.208295c-3.115967 7.309476-6.514367 14.33345-10.224876 20.961404L511.786641 786.777157l-43.764759-71.77879-1.671059 0.169869c-70.928423 6.090718-116.16572 25.720801-128.005372 36.653805l-2.068102 2.039449 2.153036 1.983167c15.494902 14.418384 74.950016 37.220716 169.276335 37.900192l8.441253 0 0 0c94.15645-0.679475 153.753803-23.425525 169.389922-37.815257l2.209318-2.010797-2.237971-1.983167c-8.668427-7.704472-40.194444-22.859637-88.74623-31.782867l37.276998-59.824527c77.754898 17.561981 120.528074 50.760081 120.528074 93.532233C754.540454 827.226404 632.738363 860.084767 511.984139 860.084767L511.984139 860.084767 511.984139 860.084767zM511.984139 261.6113c-49.739844 0-90.190115 40.62014-90.190115 90.530876 0 49.824779 40.449247 90.416266 90.190115 90.416266 49.76952 0 90.246397-40.562834 90.246397-90.416266C602.231559 302.231439 561.753659 261.6113 511.984139 261.6113L511.984139 261.6113 511.984139 261.6113zM511.984139 261.6113" fill="#ffffff" p-id="3278" class="custom-cursor-on-hover selected" data-spm-anchor-id="a313x.7781069.0.i6"></path></svg>
             </div>
            <span>中国大陆</span>
          </div>
          <div class="nt2">
            <span>© 2023 F.Joey. 保留所有权利且含所有解释权 </span>
          </div>
        </div>
      </div>
       
    </div>
   
  </div>
</template>

<script>
export default {
  name: 'footer',
  data () {
    return {
      msg: ''
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style scoped>
div{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
li{
  list-style-type: none;
  padding-inline-start: 0;
}
.Footer{
  position: relative;
  width: 100%;
  margin-top: 20px;
  z-index: 99;
  color: aliceblue;  
  background: black;
    /* border: 1px solid royalblue; */
}
.footer_box{
  
  padding-top: 40px;
  padding-bottom: 0;
  padding-right: 40px;
  padding-left: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  /* height: 200px; */
}
.footer_content{
/* border: 1px solid rgb(206, 28, 28); */
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
font-size: 14px;
}
.vas{
  vertical-align: top;
}

.l_1{
  padding-left: 6px;
  padding-right: 6px;
  width: 15%;
  display: inline-block;
  font-size: 14px;
  line-height: 1.714285714285714;
  /* border: 1px solid white; */
}
.ll_1{
  overflow: hidden;
  transition: opacity .3s,max-height .5s;
  padding: 0;
  max-height: none!important;
  opacity: 1;
  border-bottom: none;
}
.ll_1 ul{
    margin-top: 0;
    margin-bottom: 0;
}
.ll_link{
margin-bottom: 3px;
}
.ll_link a{
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
  line-height: 2.333333333333333;
  color: #fff;
  text-transform: uppercase;
  font-family: Nike TG,Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 14px;
}

.ll_2{
  padding: 0;
  max-height: none!important;
  opacity: 1;
  border-bottom: none;
  overflow: hidden;
  transition: opacity .3s,max-height .5s;
}
.footer_heading{
      color: #fff;
      margin-bottom: 3px;
}
a{
  background-color: transparent;
}
.footer_heading a{
  color: #fff;
  font-family: Nike TG,Helvetica Neue,Helvetica,Arial,sans-serif;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.ll_link .sml{
  color: #7e7e7e;
  font-size: 12px;
  line-height: 2.333333333333333;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
}
.ll_link .sml:hover{
  color:#fff;
}

.footer_note{
  position: relative;
  /* bottom: -40px; */
  font-size: 14px;
  line-height: 1.714285714285714;
  padding-top: 12px;
  padding-left: 8px;
  width: 50%;
  display: inline-block;
  margin-left: 48px;
  margin-bottom: 20px;
}
.note_cones{
  display: flex;
}
.nt1{
  background: transparent;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  transition: color .35s ease;
}
.nt1 span{
  color: #fff;
}
.nttsvg{
  position: relative;
  top: 10px;
}
.nt2{
  margin-left: 20px;
  background: transparent;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  transition: color .35s ease;
}
.nt2 span{
  color: #7e7e7e;
   font-size: 12px;
}
</style>
